<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<head>
<style type="text/css">
    .select2-container .select2-selection--single {
        border: none;
        border-bottom: solid 1px #EEEEEE;
    }
</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>设计工时确认单</h1>
</section>
<section class="content">
    <div class="row" style="margin-bottom: 24px">
        <a id="btn-save" href="javascript:void(0);"
           class="btn btn-info pull-right" style="margin-right: 10px" shiro:hasPermission="cost:Deshou:edit">
            <span class="Bold">确定</span>
        </a>
    </div>
    <div class="row">
        <form id="sheetForm" class="form-horizontal">
            <div class="col-xs-10 col-xs-offset-1">
                <div class="row">
                    <div class="form-inline">
                        <input id="sheetForm-proId" type="hidden" name="proId">
                        <input id="sheetForm-proCode" type="hidden" name="proCode">
                        <input name="costType" type="hidden" value="1">
                        <div class="form-group" style="margin-right: 13px;margin-left: 0px;">
                            <label>项目编号</label>
                            <select id="sheetForm-proCodeSelect" class="form-control"
                                    style="width:150px;"></select>
                        </div>
                        <div class="form-group" style="margin-right: 10px;">
                            <label>项目名称</label>
                            <input id="sheetForm-proName" name="proName" type="text" class="form-control text-center"
                                   style="border: none; border-bottom: solid 1px #EEEEEE;width:300px;background-color: white;"
                                   autocomplete="off" readonly>
                        </div>
                        <div class="form-group" style="margin-right: 10px;">
                            <label>项目数量</label>
                            <input id="sheetForm-proNum" type="number" name="proNum" class="form-control text-center"
                                   style="border: none; border-bottom: solid 1px #EEEEEE;width:100px;background-color: white;"
                                   autocomplete="off" readonly>
                        </div>
                        <div class="form-group" style="margin-right: 10px;">
                            <label>专业</label>
                            <select id="sheetForm-special" class="form-control" name="special"
                                    style="border: none; border-bottom: solid 1px #EEEEEE;width:100px;-webkit-appearance:none;">
                                <option value="">请选择</option>
                                <option value="机械">机械</option>
                                <option value="流体">流体</option>
                                <option value="自动化">自动化</option>
                            </select>
                        </div>
                        <div class="form-group" style="margin-right: 10px;">
                            <label>部分</label>
                            <select id="sheetForm-proPart" class="form-control" name="proPartId"
                                    style="border: none; border-bottom: solid 1px #EEEEEE;width:150px;-webkit-appearance:none;">
                                <option value="" selected>请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
                <h4 style="margin-top: 60px;">人工工时</h4>
                <table class="t1 t3">
                    <thead>
                    <tr>
                        <td style="width: 10%">序号</td>
                        <td style="width: 23%">工时类别</td>
                        <td style="width: 16%">数量</td>
                        <td style="width: 16%">单位</td>
                        <td style="width: 25%">备注</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="hours">
                    <td>1</td>
                    <td>设计工时</td>
                    <td>
                        <input type="number" step="0.1" class="form-control" name="hQuantity" autocomplete="off">
                    </td>
                    <td>工日</td>
                    <td>
                        <input type="text" class="form-control" name="hRemark" autocomplete="off">
                    </td>
                    <td></td>
                    </tbody>
                </table>
                <h4 style="margin-top: 50px;">设备重量</h4>
                <table class="t1 t3" id="weightTable">
                    <thead>
                    <tr>
                        <td style="width: 10%">序号</td>
                        <td style="width: 23%">重量类别名称</td>
                        <td style="width: 16%">主要辅材用量</td>
                        <td style="width: 16%">单位</td>
                        <td style="width: 25%">备注</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="weight">
                    <td>1</td>
                    <td>
                        <select class="form-control" name="wDescribe">
                            <option value="">请选择</option>
                            <option th:each="r : ${weightType}" th:value="${r.name}"
                                    th:text="${r.name}"></option>
                        </select>
                    </td>
                    <td>
                        <input type="number" step="0.1" class="form-control" name="wQuantity" autocomplete="off">
                    </td>
                    <td>
                        <input type="text" class="form-control" name="wUnit" autocomplete="off" value="吨">
                    </td>
                    <td>
                        <input type="text" class="form-control" name="wRemark" autocomplete="off">
                    </td>
                    <td style="text-align:left;padding-left: 5px;">
                        <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                        <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                    </td>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-10 col-xs-offset-1" style="font-size: 14px;line-height: 200%;margin-top:10px;">
                <div class="col-xs-3" style="padding-left: 0">创建人： [[${session.user.name}]]</div>
            </div>
        </form>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let dynamicId=0;

    /** 计算表格序号 */
    function computerNo() {
        $("table#weightTable tbody tr").each(function (i, e) {
            $(this).children("td:first").text(i + 1);
        });
    }

    $(function () {

        /** 项目编号下拉框 */
        js.select2({
            id: 'sheetForm-proCodeSelect',
            placeholder: '',
            ajax: {
                url: function () {
                    return ctx + 'cost/dsnCost/project/list'
                },
                processResults: function (data, page) {
                    let array = data;
                    for (let i = 0; i < data.length; i++) {
                        array[i]["id"] = array[i]['id'];
                        array[i]["text"] = array[i]['code'];
                    }
                    return {results: array};
                },
            }
        });
        /** 项目编号下拉框选中 */
        $("#sheetForm-proCodeSelect").on("select2:select", function () {
            $("#sheetForm-proName").val($(this).select2("data")[0].name);
            $("#sheetForm-proNum").val($(this).select2("data")[0].num);
            $("#sheetForm-proId").val($(this).select2("data")[0].id);
            $("#sheetForm-proCode").val($(this).select2("data")[0].code);
            getPart();
        });
        $("#sheetForm-special").change(function () {
            getPart();
        })

        /** 动态获取重量类别 */
        dynamicAcquisition();

        /** 添加一行 */
        $("#sheetForm").on('click', '.out-add', function () {
            /** 动态添加下拉列表的记录数*/
            dynamicId++;
            $(this).parents("tr").after(`
                    <tr>
                        <td></td>
                        <td>
                            <select class="form-control" id="desc`+dynamicId+`" name="wDescribe"></select>
                        </td>
                         <td>
                            <input type="number" step="0.1" class="form-control" name="wQuantity" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="wUnit" autocomplete="off" value="吨">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="wRemark" autocomplete="off">
                        </td>
                        <td style="text-align:left;padding-left: 5px;">
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                    </td>
                    </tr>
            `);
            computerNo();
            additional();
        });

        /** 删除行 */
        $('#sheetForm').on('click', '.out-del', function () {
            $(this).parents("tr").remove();
            if ($("table#weightTable tbody tr").length === 0) {
                $("#weight").append(`
                                <tr>
                                    <td></td>
                                    <td>
                                        <select class="form-control" id="desc`+dynamicId+`" name="wDescribe"></select>
                                    </td>
                                    <td>
                                        <input type="number" step="0.1" class="form-control" name="wQuantity" autocomplete="off">
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" name="wUnit" autocomplete="off" value="吨">
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" name="wRemark" autocomplete="off">
                                    </td>
                                    <td style="text-align:left;padding-left: 5px;">
                                        <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                                        <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                                    </td>
                                </tr>
                            `)
                additional();
            }
            computerNo();
        });

        /** 保存设计工时确认单 */
        $("#btn-save").click(function () {

            let $this = $(this);
            let res = js.vd({
                id: 'sheetForm',
                notEmpty: ['proCode', 'special', 'proPartId', 'hQuantity']
            })
            if (!res) {
                return;
            }
            $this.attr('disabled', true);
            js.submit({
                formId: "sheetForm",
                url: ctx + 'cost/dsnCost/save',
                data: new FormData($("#sheetForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        location.href = ctx + "cost/dsnCost/subList";
                    } else {
                        js.modal.warning("该项目部分的设计工时确认单已经存在，不允许重复保存！");
                    }
                }
            });
            $this.removeAttr('disabled');
        });

    });

    /** 获取部分 */
    function getPart() {
        let code = $("#sheetForm-proCode").val();
        let type = $("#sheetForm-special").val();
        switch (type) {
            case '机械' :
            case '流体' :
            case '自动化' :
                fetchPart(code, type);
                break;
            case '外观' :
                fetchPart(code, null);
                break;
        }
    }

    function fetchPart(code, type) {
        js.get({
            url: ctx + 'tecout/tecnote/part/list',
            data: {
                code : code,
                type : type
            },
            success: function (result) {
                $("#sheetForm-proPart").empty().append(`<option value="">请选择</option>`);
                result.forEach(value => {
                    if (value) {
                        $("#sheetForm-proPart").append(`<option value="${value.id}">${value.special}-${value.proPart}</option>`);
                    }
                })
            }
        })
    }

    /** 动态获取重量类别 */
    function dynamicAcquisition(){
        js.post({
            url: ctx + "cost/dsnCost/weightType",
            data: {},
            success: function (result) {
                if (result.length>0) {
                    sessionStorage.setItem("weightTypeList",JSON.stringify(result));
                } else {
                    js.modal.warning(result.msg);
                }
            }
        })
    }

    /** 在固定的td里面填充select*/
    function additional(){
        var weightTypeArry =  JSON.parse(sessionStorage.getItem("weightTypeList"));
        $("#desc"+dynamicId).append(`<option value="">请选择</option>`);
        weightTypeArry.forEach(value => {
            if (value) {
                $("#desc"+dynamicId).append(`<option value="${value.name}">${value.name}</option>`);
            }
        })
    }

</script>
</body>
</html>
